import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import WH_Constants from './WH_Constants';
import CommonListPage from '../common/CommonListPage';
import {DateUtils} from '../../utils/Utils';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';
import WH_RequestPostsAction from '../../actions/workhard/WH_RequestPostsAction';
import WH_PostItemView from './WH_PostJDZItemView';

const SORT_ARR=[
  {key:'1',name:'最新'},
  {key:'3',name:'点赞量排行'},
  {key:'2',name:'点击量排行'},
  {key:'4',name:'回复数排行'},
];
const typeDic={
  '生产经营':18,'科技创新':19,'管理提升':20,'安全环保':21,'党的建设':22,'和谐矿区':23,
}
export default class WH_HuiYinBiPage extends CommonListPage {
	constructor(props) {
      super(props);
      const date = new Date();
      this.state = {
        sub_tag:{value:'全部'},
      }
      this.select_index=0;
      this.tagArr = [];
      this.tagArr.push("全部");
      this.tagArr.push("生产经营");
      this.tagArr.push("科技创新");
      this.tagArr.push("管理提升");
      this.tagArr.push("安全环保");
      this.tagArr.push("党的建设");
      this.tagArr.push("和谐矿区");

	}
	_getViewStyle() {
      return {paddingTop:Config.paddingTop,
        backgroundColor:"#ffffff"}
  	}
  refRefresh(){
    this.doRefresh();
  }
	_getListViewStyle() {
      return {
        width:SizeUtils.getWindowSize().width,
        paddingTop:0,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(210)),
        backgroundColor:"#ff0"};
  	}
    _onRenderItem(data, index) {
      return (<WH_PostItemView refRefresh={this.refRefresh.bind(this)} data={data} index={index} showNum = {true} />)
    }
  	_requestData(page, listView) {
      new WH_RequestPostsAction().call(listView, {sort_id:SORT_ARR[this.select_index].key,official:1,
      sub_tag:typeDic[this.state.sub_tag.value],page:page, page_size:10});
  	}
  	_renderTopView(){
  	  return(
  		<View>
  		  <View style={{
  		  	height:SizeUtils.translateDesignHeightToCode(90),
  		  	flexDirection:"row",
  		    }}>
  		    <View style={{flex:1}}>{this._renderTypes()}</View>
  		  </View>
  		  <View style={{
        	  height:SizeUtils.translateDesignHeightToCode(20),
        	  backgroundColor:'#eee'}}/>
       	  <View style={{
              flexDirection:"row",
              borderColor:'#eeeeee',
              borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
              height:SizeUtils.translateDesignHeightToCode(80),
              justifyContent:"space-around",
            }}>
              {SORT_ARR.map((item,index)=> this._getSortButton(item,index) )}
          </View>
          <View style={{
        	  height:SizeUtils.translateDesignHeightToCode(20),
        	  backgroundColor:'#eee'}}/>
  		</View>
  	  );
  	}
    _getSortButton(typeData,index) {
     return (
      <TouchableOpacity
        key={typeData.key}
        onPress = {() => {
          if (this.select_index!==index) {
            this.setState({t:'df'});
            this.select_index=index;
            // this.clear();
            this.doRefresh();
          }
        }}
        style={[{
          borderColor:'#eeeeee',
          flex:1,
          alignItems: 'center',
          justifyContent: 'center',
          borderRightWidth:SizeUtils.translateDesignWidthToCode(3)
        }]}>
          <Text style={[CommonStyles.secondaryText,
              {textAlign:"center",color:index===this.select_index?'#ee3535':'#000',
              fontSize:SizeUtils.translateFontSizeToCode(30),
              backgroundColor:"#00000000", borderWidth:0,}]}>{typeData.name}
          </Text>
      </TouchableOpacity>
     )
    }
  	  //选择分类
  	_renderTypes() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{height:SizeUtils.translateDesignHeightToCode(90),alignItems: 'center',
          borderColor: '#eeeeee',flexDirection:'row',
          flex:1,
          marginLeft:SizeUtils.translateDesignWidthToCode(20),
          borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}
            onPress={this._onPressChooseType.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            {"全部分类:  "}
          </Text>
          <Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            {this.state.sub_tag.value}
          </Text>
          <TImage source={require("../../../resource/images/home/arrow.png")}
            style={{marginRight:SizeUtils.translateDesignWidthToCode(30),width:19, height:38}}/>
        </TouchableOpacity>)
      }
      else{
       return (
       <View style={{height:SizeUtils.translateDesignHeightToCode(90),
        borderColor: '#eeeeee',flexDirection:"row",alignItems:"center",
        marginLeft:SizeUtils.translateDesignWidthToCode(20),
        borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}>
        <Text style={{textAlign:"center",alignItems:"center",fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {"年度:  "}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.sub_tag.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onPickerCallback(value)}>
            {this.tagArr.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item}
                  label={item}
                />
              )}
            )}

          </Picker></View></View>)
        }

    }
    _onPressChooseType() {
      new CommonShowPickerAction().call(this, {pickerData:this.tagArr,
       callback:this._onPickerCallback.bind(this)});
    }
   _onPickerCallback(selectedValue) {
     this.setState({
       sub_tag:{value:selectedValue},
     });
     setTimeout(()=>{
     	this.doRefresh();
     },1000);
   }
}